<script setup lang="ts">
import type { InfoItem } from '@/components/DetailCard.vue'
import { ref } from 'vue'
import DetailCard from '@/components/DetailCard.vue'

// 示例数据 - 各种类型字段
const typeDemoData = ref<InfoItem[]>([
  {
    label: '订单金额',
    value: 123456.78,
    type: 'currency',
  },
  {
    label: '优惠金额',
    value: 888.88,
    type: 'currency',
  },
  {
    label: '订单日期',
    value: '2024-01-15',
    type: 'date',
  },
  {
    label: '下单时间',
    value: '2024-01-15 14:30:25',
    type: 'datetime',
  },
  {
    label: '开始时间',
    value: '14:30:00',
    type: 'time',
  },
  {
    label: '折扣率',
    value: 8.5,
    type: 'percentage',
  },
  {
    label: '订单状态',
    value: 'pending',
    type: 'status',
  },
  {
    label: '支付状态',
    value: 'success',
    type: 'status',
  },
  {
    label: '商品链接',
    value: 'https://example.com/product/12345',
    type: 'url',
  },
  {
    label: '文件大小',
    value: 2097152, // 2MB
    type: 'filesize',
  },
  {
    label: '备注信息',
    value: '这是一个很长的备注信息，需要多行显示。包含了很多重要的说明内容，用户需要清楚地看到所有的信息。',
    type: 'default',
    forceMultiline: true,
  },
  {
    label: '普通文本',
    value: '这是一个普通的文本字段，使用默认显示方式',
    type: 'default',
  },
])
</script>

<template>
  <view class="page">
    <view class="page-header">
      <text class="page-title">DetailCard 字段类型演示</text>
      <text class="page-subtitle">展示不同字段类型的格式化显示效果</text>
    </view>

    <view class="page-content">
      <DetailCard
        title="订单详情"
        :info-list="typeDemoData"
      />

      <view class="code-example">
        <text class="code-title">使用示例：</text>
        <text class="code-text">
          {
          label: '订单金额',
          value: 123456.78,
          type: 'currency'
          }
        </text>
        <text class="code-text">
          {
          label: '订单日期',
          value: '2024-01-15',
          type: 'date'
          }
        </text>
        <text class="code-text">
          {
          label: '订单状态',
          value: 'pending',
          type: 'status'
          }
        </text>
      </view>
    </view>
  </view>
</template>

<style scoped>
.page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.page-header {
  padding: 40rpx 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.page-title {
  display: block;
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 10rpx;
}

.page-subtitle {
  display: block;
  font-size: 28rpx;
  color: #666;
}

.page-content {
  padding: 0 20rpx;
}

.code-example {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 12rpx;
  margin-top: 20rpx;
}

.code-title {
  display: block;
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 20rpx;
}

.code-text {
  display: block;
  font-size: 24rpx;
  color: #666;
  background-color: #f8f9fa;
  padding: 16rpx;
  border-radius: 8rpx;
  margin-bottom: 10rpx;
  font-family: monospace;
}
</style>
